<template>
  <div id="cesiumContainer">
    <!-- 全省负氧离子站点数据 --> 
    <div v-if="showStation">
        <div  v-for="(item,index) in markerArr2N"  
        id="popup-fylzStation"
        class="cesium-popup"  :key="index"  style="pointer-events: none;position:absolute;z-index:1;">
        <div class="cesium-popup-content-wrapper" style="position:relative;box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit" >
            <div class="cesium-popup-content">
                <div class="fuyangliziNum" :style='"width:100px;font-size:20px;pointer-events: auto;background:transparent;color:"+item.color'>
                    <span :style='"display:block;margin:o auto;pointer-events: auto;cursor:pointer;font-size:20px;color:"+item.color'>
                        {{item.name}}
                    </span>
                    {{parseInt(item.count)}}
                </div>
            </div>
            </div>
        </div>
    </div> 
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    name: 'CesiumContainers',
    props:{
        newArr2:Array,
    },
    watch:{
        newArr2:{
            handler: function (val){
                this.changeAllStations();
            },
            deep: true
        }
    },
    data(){
      return{
        //显示坐标，视角海拔，海拔，视高
        fylzSX:null,
        qhzsSX:null,
        isCounty:true,
        isStation:false,
        x: 0,
        y: 0,
        viewHeight:0,
        seaHeight:0,
        objPopup1:{},
        markerArr2:[],//存储负氧离子城市marker数据
        showStation:false,
        model:[],
        markerArr2N:[{name:'',count:'',color:''}],
      }
    },
    methods: {
        //实时显示坐标,注意缩进
        getXy: function(){
          var that = this
          var handler3D = new Cesium.ScreenSpaceEventHandler(that.$comjs.viewer.scene.canvas);//初始化之后才能引入全局viewer,进入函数前初始化this,调用全局viewer
              handler3D.setInputAction(function(movement) {
              var pick= new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);
              if(pick){
                  var cartesian = that.$comjs.viewer.scene.globe.pick(that.$comjs.viewer.camera.getPickRay(pick), that.$comjs.viewer.scene);
                  if(cartesian){
                      //世界坐标转地理坐标（弧度）
                      var cartographic = that.$comjs.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                      if(cartographic){
                          //鼠标位置地球表面物体的真实海拔
                          var height =that.$comjs.viewer.scene.globe.getHeight(cartographic);
                          //视角海拔高度
                          var he = Math.sqrt(that.$comjs.viewer.scene.camera.positionWC.x * that.$comjs.viewer.scene.camera.positionWC.x + that.$comjs.viewer.scene.camera.positionWC.y * that.$comjs.viewer.scene.camera.positionWC.y + that.$comjs.viewer.scene.camera.positionWC.z * that.$comjs.viewer.scene.camera.positionWC.z);
                          var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z);
                          //地理坐标（弧度）转经纬度坐标
                          var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                          if(!height){
                              height = 0;
                          }
                          if(!he){
                              he = 0;
                          }
                          if(!he2){
                              he2 = 0;
                          }
                          if(!point){
                              point = [0,0];
                          }
                          
                          let x = point[0].toFixed(6);  
                          let y = point[1].toFixed(6);
                          let viewHeight = (he - he2).toFixed(2); 
                          let seaHeight = height.toFixed(2) ;
                          that.$store.commit('changeXy', {x, y,viewHeight,seaHeight})//通过vuex传递给其他组件
                          //视角海拔高度:"+(he - he2).toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;
                          //海拔: " + height.toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;
                          //经度：" + point[0].toFixed(6) + "&nbsp;&nbsp;
                          //纬度：" + point[1].toFixed(6)+ "</span>";
                      }
                  }
              }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        },
        heightControl: function(){
            var that = this;
            // if(this.$store.state.curState==2){
            // that.$comjs.viewer.dataSources.get(0).show=false;
            // that.$comjs.viewer.dataSources.get(1).show=true;
            // // that.$comjs.viewer.dataSources.get(3).show=false;
            // that.$comjs.viewer.dataSources.get(2).show=false;
            // }
            var handler = new Cesium.ScreenSpaceEventHandler(that.$comjs.viewer.scene.canvas);
            handler.setInputAction(function(wheelment) {
                var height=that.$comjs.viewer.camera.positionCartographic.height;
                //滚动时事件穿透，鼠标在元素上时仍可缩放地球
                //console.log(that.$comjs.viewer.camera.heading)
                //console.log(that.$comjs.viewer.camera.pitch)
                //console.log(that.$comjs.viewer.camera.roll)
                that.$comjs.viewer.dataSources.get(0).show=false;
                that.$comjs.viewer.dataSources.get(1).show=false;
                that.$comjs.viewer.dataSources.get(2).show=false;
                    if(height>914219 ){ 
                        //清除已加载的数据集
                        // that.$comjs.viewer.dataSources.remove(that.$comjs.viewer.dataSources.get(0));
                        // 隐藏已加载的数据集
                        that.$comjs.viewer.dataSources.get(0).show=true;
                        that.$comjs.viewer.dataSources.get(1).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=false;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=false;
                        
                    }else if(height<914219 && height>313015){
                        that.$comjs.viewer.dataSources.get(0).show=false;
                        that.$comjs.viewer.dataSources.get(1).show=true;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=true;
                    }else{
                        that.$comjs.viewer.dataSources.get(0).show=false;
                        that.$comjs.viewer.dataSources.get(1).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=true;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=true;
                    }
                    if(height<123000){//显示站点
                        //改变当前页面要显示的站点内容，
                        // 1：表示显示负氧离子 城市点数据，
                        // 2：表示显示负氧离子 县级点数据，
                        // 3：表示显示负氧离子 站点级数据，
                        //当前边界显示状态
                        that.$store.commit('changeFYLZCS',1)
                        that.showStation = false
                        $('div[id^="popup-fylzCity"]').hide();
                        
                    }
                    if(height<313015 && height>123000){//显示县级站点

                        that.$store.commit('changeState',2)

                        $('div[id^="popup-fylzCity"]').hide();
                        
                    }
                    if(height>313015 ){//显示城市
                        that.$store.commit('changeFYLZCS',0)
                      
                    }
                    if(height>2130450){

                    }
            }, Cesium.ScreenSpaceEventType.WHEEL);
        },
        colorRgba(a){
            let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            var sColor = a.toLowerCase();
                if(sColor && reg.test(sColor)){
                    if(sColor.length === 4){
                        var sColorNew = "#";
                        for(var i=1; i<4; i+=1){
                            sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));	
                        }
                        sColor = sColorNew;
                    }
                    //处理六位的颜色值
                    var sColorChange = [];
                    for(var i=1; i<7; i+=2){
                        sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));	
                    }
                    return "rgba(" + sColorChange.join(",") + ",100%)";
                }else{
                    return sColor;	
                }
        },
        jiaodu: function(){
            var that = this;
            var handler = new Cesium.ScreenSpaceEventHandler(that.$comjs.viewer.scene.canvas);
            handler.setInputAction(function(wheelment) {
                console.log(that.$comjs.viewer.camera.pitch)
            }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
        },
        // 动态改变颜色
        fourColor(myArr,yourArr){
            switch( myArr.BCMIDJ ){
                    case '舒适':{
                        yourArr.background = "#32F3A9";
                        break;
                    }
                    case '一般舒适':{
                        yourArr.background = "#63B5E6";
                        break;
                    }
                    case '不舒适':{
                        yourArr.background = "#E8CE67";
                        break;
                    }
                }
                switch( myArr.HCIDJ ){
                    case '特别适宜':{
                        yourArr.background1 = "#32F3A9";
                        break;
                    }
                    case '适宜':{
                        yourArr.background1 = "#63B5E6";
                        break;
                    }
                    case '不适宜':{
                        yourArr.background1 = "#E8CE67";
                        break;
                    }
                }
                switch( myArr.WCIDJ){
                    case '弱冷胁迫':{
                        yourArr.background2 = "#32F3A9";
                        break;
                    }
                    case '中冷胁迫':{
                        yourArr.background2 = "#63B5E6";
                        break;
                    }
                    case '强冷胁迫':{
                        yourArr.background2 = "#E8CE67";
                        break;
                    }
                }
                switch( myArr.THIDJ ){
                    case '弱温湿胁迫':{
                        yourArr.background3 = "#32F3A9";
                        break;
                    }
                    case '中温湿胁迫':{
                        yourArr.background3 = "#63B5E6";
                        break;
                    }
                    case '强温湿胁迫':{
                        yourArr.background3 = "#E8CE67";
                        break;
                    }
                }
        },
        //负氧离子站点数据model
        changeAllStations(){
            var markerArr2 = [];
            for(var i=0;i<this.newArr2.length;i++){
                markerArr2[i]={};
                markerArr2[i].x=this.newArr2[i].Lon;
                markerArr2[i].y=this.newArr2[i].Lat;
                markerArr2[i].markerImg='./yq/yq1.png';
                markerArr2[i].name=this.newArr2[i].StationName;
                markerArr2[i].name1=this.newArr2[i].City;
                markerArr2[i].level=this.newArr2[i].level;
                markerArr2[i].negative_K04=parseInt(this.newArr2[i].negative_K04);
                markerArr2[i].MaxNegative_K04=this.newArr2[i].MaxNegative_K04;
                markerArr2[i].markerId = i;
                markerArr2[i].QXDJ=this.newArr2[i].QXDJ;
                markerArr2[i].type = this.newArr2[i].Department;
                switch(this.newArr2[i].Level){
                    case 1:{
                        markerArr2[i].num = 3;
                        markerArr2[i].Level='I';
                        markerArr2[i].markerColor=this.$comjs.color1;
                        markerArr2[i].markerImg='./yq/yq1.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 2:{
                        markerArr2[i].num = 5;
                        markerArr2[i].Level='II';
                        markerArr2[i].markerColor=this.$comjs.color2;
                        markerArr2[i].markerImg='./yq/yq2.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 3:{
                        markerArr2[i].num = 7;
                        markerArr2[i].Level='III';
                        markerArr2[i].markerColor=this.$comjs.color3;
                        markerArr2[i].markerImg='./yq/yq3.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 4:{
                        markerArr2[i].num = 9;
                        markerArr2[i].Level='IV';
                        markerArr2[i].markerColor=this.$comjs.color4;
                        markerArr2[i].markerImg='./yq/yq4.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 5:{
                        markerArr2[i].num = 11;
                        markerArr2[i].Level='VI';
                        markerArr2[i].markerColor=this.$comjs.color5;
                        markerArr2[i].markerImg='./yq/yq5.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                }
                //加entity
                this.model[i] = this.$comjs.viewer.entities.add({
                    name : markerArr2[i].name + markerArr2[i].type,
                    position : Cesium.Cartesian3.fromDegrees(markerArr2[i].x,markerArr2[i].y,0),
                    billboard : {
                        name: markerArr2[i].type,
                        image : markerArr2[i].markerImg,
                        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                        clampToGround: true,
                        scale:0.2
                    }
                    // ,
                    // label : {
                    //     text : markerArr2[i].name ,
                    //     font : '10px sans-serif',
                    //     // showBackground : true ,
                    //     horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                    //     pixelOffset : new Cesium.Cartesian2(0.0, 5),
                    //     pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
                    // }
                });
            } 
            this.markerArr2 = markerArr2
            this.$store.commit("changeAllStationsModel",this.model)
        },
        showStationDetial(){
            var that = this;
            var pickPosition;
            var xNew;
            var yNew;
            this.$comjs.viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                var picked = that.$comjs.viewer.scene.pick(movement.startPosition);//点击实体时显示内容
                for(var i = 0;i<that.model.length;i++){
                    if (picked) {
                        if (picked.id == that.model[i]) {
                            pickPosition = that.$comjs.viewer.scene.pickPosition(movement.startPosition);
                            that.showStation=true;
                            xNew = that.markerArr2[i].x;
                            yNew = that.markerArr2[i].y;
                            that.markerArr2N[0].name = that.markerArr2[i].name;
                            that.markerArr2N[0].count = that.markerArr2[i].negative_K04;  
                             that.markerArr2N[0].color = that.markerArr2[i].markerColor;
                        }
                    } else {
                        that.showStation=false;
                    }
                }   
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            var removeChanged = that.$comjs.viewer.scene.postRender.addEventListener(function (percentage) {
                //转换到屏幕坐标
                if (pickPosition &&  that.showStation == true) {
                    var winpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.$comjs.viewer.scene, Cesium.Cartesian3.fromDegrees(xNew,yNew, 0));
                    // var winpos =that.$comjs.viewer.scene.cartesianToCanvasCoordinates(pickPosition);
                    if (winpos) {
                        var x = winpos.x - ($('#popup-fylzStation').width() / 2);
                        var y = winpos.y - ($('#popup-fylzStation').height() * 1.5);
                        // info.style.left = x + 'px';
                        // info.style.top = y + 'px';
                        $('#popup-fylzStation').css('transform', 'translate3d(' + x + 'px,' + y + 'px, 0)');
                       
                    }
                }
            });
        }
    },    
    beforeDestroy(){
        if(this.fylzSX){
            clearInterval(this.fylzSX)
        }
        if(this.qhzsSX){
            clearInterval(this.qhzsSX)
        }
    },
    mounted(){
        this.$comjs.cesiumInit();//初始化
        this.getXy();//获取经纬度
        this.heightControl();//鼠标滚轮获取视高，动态控制
        //请求marker数据
        if(this.fylzSX){
            clearInterval(this.fylzSX)
        }
        if(this.qhzsSX){
            clearInterval(this.qhzsSX)
        }
        this.showStationDetial()
        // setTimeout(()=>{
        //     //固定时间刷新
        //     var nowDate = new Date();
        //     var nowHour = nowDate.getHours();
        //     if(nowHour==3){
        //         //执行刷新页面
        //         //location.reload()
        //     }
        //     console.log(nowHour);
        //     this.fylzProUrl = "/FYLZProvince1.json"
        //     // this.getProvinceData();
        // },5000)
        // setTimeout(()=>{
        //     //调用外部方法，绑定html到球面上,此方法绑定球上的坐标，获取不到，鼠标远离球面都会使球面数据出现错误，从而报错，出现不能获取x,y的错误

        setTimeout(()=>{ 
            this.$comjs.viewer.dataSources.get(0).show=false;
            this.$comjs.viewer.dataSources.get(1).show=true;
            this.$comjs.viewer.dataSources.get(2).show=false;
        },2000)
        // setTimeout(()=>{
        //     if(this.$store.state.forq==0){
        //         this.$comjs.addError1(this.objPopup1);
        //     }else if(this.$store.state.forq==1){
        //         this.$comjs.addError1(this.objPopup4);
        //     }
        // },500)
        // 无法提供定位，可能是最新的还没有更新
        this.$comjs.onCenter(119.906064,29.573401,250000.0);
    }
  }
</script>


<style  >
    #cesiumContainer{
        width:100vw;
        height:100vh;
        overflow: hidden;
    }
    .cesium-viewer-bottom{
        display:none;
    }
    .FPS{
        width:80px;
        height:50px;
        position:absolute;
        top:9px;
        right:0px;
        z-index:3;
        color:#EE5522;
        font-size: 20px;
        text-align: center;
    }
</style>
